<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="yes" name="apple-mobile-web-app-capable"><!--可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果）-->
    <meta content="yes" name="apple-touch-fullscreen"><!--添加到主屏幕后，全屏显示-->
    <meta content="telephone=no,email=no" name="format-detection"><!--IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--避免IE使用兼容模式-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style"><!--仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="main">
    <!--轮播图-->
    <header class="header">
        <!-- banner  Swiper -->
        <section class="swiper1 swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/mall/banner/banner01.png" alt=""/>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/mall/banner/banner02.png" alt=""/>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/mall/banner/banner03.png" alt=""/>
                    </a>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </section>
        <!--news轮播-->
        <section class="news">
            <div class="news-center">
                <div class="news-huabin">
                    <img src="./images/mall/news-huabin.png" alt="">
                </div>
                <span class="line"></span>
                <span>恭喜</span>
                <!-- Swiper -->
                <div class="swiper2 swiper-container">
                    <div class="swiper-wrapper">
                        <span class="swiper-slide">用户***获得10积分</span>
                        <span class="swiper-slide">用户***获得10积分</span>
                    </div>
                </div>
            </div>
        </section>
    </header>
    <!--分类-->
    <ul class="classification clearfix">
        <li>
            <a href="./view/lottery-area.html">
                <img src="images/mall/lottery.png" alt="">
            </a>
        </li>
        <li>
            <a href="./view/seckill-area.html">
                <img src="images/mall/seckill.png" alt="">
            </a>
        </li>
        <li>
            <a href="./view/collage-area.html">
                <img src="images/mall/collage.png" alt="">
            </a>
        </li>
        <li>
            <a href="./view/huabin-area.html">
                <img src="images/mall/huabin.png" alt="">
            </a>
        </li>
    </ul>
</div>
<!--底部导航-->
<nav class="nav">
    <ul class="clearfix">
        <li>
            <a href="javascript:;">
                <img src="images/mall/home_yes.png" alt=""/>
                <span class="nav-active">首页</span>
            </a>
        </li>
        <li>
            <a href="view/mine.html">
                <img src="images/mall/mine_no.png" alt=""/>
                <span>我的</span>
            </a>
        </li>
    </ul>
</nav>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/swiper/js/swiper.jquery.min.js"></script>
<script src="js/index.js"></script>
<script>
    $(function () {
        /*banner*/
        var swiper1 = new Swiper('.swiper1', {
            autoplay: 3000,//可选选项，自动滑动
            loop: true,
            autoplayDisableOnInteraction: false,//滑动以后是否禁止autoplay
            // 分页器
            pagination: '.swiper-pagination',
        });
        /*news轮播*/
        var swiper2 = new Swiper('.swiper2', {
            direction: 'vertical',
            autoplay: 3000,//可选选项，自动滑动
            loop: true,
            autoplayDisableOnInteraction: false
        });
    })
</script>
</body>
</html>